
$(function () {

    // 定义 接口参数 全局变量 -  方便我们修改
    let Params = {
      // 搜索关键词，可以为空，为空返回某类型所有文章
      key: "",
      // 文章类型id，可以为空，为空返回所有类型文章
      type: "",
      // 文章状态，草稿 ，已发布,为空返回所有状态文章
      state: "",
      // 当前页，为空返回第1页
      page: 1, // 从第一页开始
      // 每页显示条数，为空默认每页6条
      perpage: 10,// 每一页显示10条
    }
  
  
    getArticles();// 显示文章列表
    getCategory();// 获取所有文章分类
  
    // 1 获取文章列表数据
    function getArticles() {
      // $.get 和 $.ajax 差不多 
      // 发送请求的时候 记得带上 全局接口的参数  Params
      $.get("/admin/article/query", Params, function (res) {
        if (res.code === 200) {
          const tbodyHtml = template("tbody-tpl", { list: res.data.data });
          $("#articleTable tbody").html(tbodyHtml);
  
          // 给分页组件 调用 做初始化 同时 传递 总条数
          renderPager(res.data.totalCount);
        }
      })
    }
  
    // 2 渲染分页组件
    function renderPager(totalCount) {
      const laypage = layui.laypage;
      laypage.render({
        elem: 'pager',
        // 由前端 自己在定义全局请求参数的时候已经写过
        limit: Params.perpage,// 10  页容量 每一页可以存放多少条 数据
        count: totalCount, // 总条数  - 不是在前端写死 只有后台能知道 我们需要在响应回来了 获取总条数 传递进去即可
        // curr:1,// 1 默认值
        // 也需要交给我们做控制
        curr: Params.page,
        jump(obj, first) {
          if (!first) {
            console.log("当前点击的页码", obj.curr);
  
            // 1 获取到当前被点击的页码
            // 2 把页码传递 全局接口参数 Params
            Params.page = obj.curr;
            // 3 重新发送请求即可 （获取params 渲染数据）
            getArticles();
          }
        }
      });
  
  
  
    }
  
  
    // 3 获取所有文章分类 显示在下拉列表中
    function getCategory() {
      $.get("/admin/category/list", function (res) {
        // console.log(res);
  
        // let html="<option>所有分类</option>";
        // html+=",,,,"
        // 记得要给option添加value值 接口文档规定！！！ 
        const optionHTML = res.data.reduce((beforeHTML, item) => beforeHTML += `<option value='${item.id}' >${item.name}</option>`, "<option value='' >所有分类</option>");
  
        $("#selCategory").html(optionHTML);
      })
  
    }
  
  
    // 4 给筛选按钮 绑定点击事件
    $("#btnSearch").on("click", function () {
  
      // 需要清空以前的分页数据！！ 
      // 以前分页 数据 建立在没有筛选过的  22页
  
      // 单独想要看 包含 “文”  数据  
      // 先找到所有包含 文 数据 然后再分页 
  
      // 执行筛选的时候  需要重新设置分页 让它从第一页开始显示！！ 
      Params.page = 1; // 经验所得 筛选和分页共同出现 筛选之前 必须要重置分页数据 
  
  
      // 3.1 获取 标题输入框即可
      // const  key=$("#aname").val().trim();
  
      // // 3.2 给全局参数 赋值
      // Params.key=key;
      Params.key = $("#aname").val().trim();
  
      // selCategory 是下拉列表 但是也可以通过 val 获取选中的值
      // console.log($("#selCategory").val());
      Params.type = $("#selCategory").val();// 文章列表
  
      Params.state = $("#selStatus").val();// 文章状态
  
      // 3.3 重新发送请求
      getArticles();
  
    })
  
    // 5 重置按钮 点击
    $("#resetBtn").on("click", function () {
      // 5.1 重置 全局参数
      Params = {
        key: "",
        type: "",
        state: "",
        page: 1, // 从第一页开始
        perpage: 10,// 每一页显示10条
      }
  
      // 5.2 表单也需要重置
      $("#aname,#selCategory,#selStatus").val("");
      // select 标签 发现 我们设置了 value 属性 空字符串 ""  找到它option里面的那个选项的value = ""
      //  找到了 设置 对应的文本来显示 
      //  $("#selCategory").val(""); 
      //  $("#selStatus").val(""); 
      // 5.3 重新发送请求
      getArticles();
  
    })
  
  })